<template>
	<view>
		<u-sticky>
			<view class="tabs">
				<view :class="status == 10 ?  color+'-color' : ''" @click="tab(10)">待审核({{status10}})</view>
				<view :class="status == 20 ?  color+'-color' : ''" @click="tab(20)">已通过({{status20}})</view>
				<view :class="status == 30 ?  color+'-color' : ''" @click="tab(30)">已驳回({{status30}})</view>
			</view>
		</u-sticky>
		<u-empty v-if="!list || list.length == 0" :customStyle="{paddingTop:'200px'}"></u-empty>
		<u-list @scrolltolower="scrolltolower" v-else>
			<u-list-item v-for="(item, index) in list" :key="index">
				<u-cell :title="item.name">
					<u-avatar slot="icon" shape="square" size="50" :src="imgUrl + item.image"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
					<view slot="label">
						<view class="btns">
							<u-icon name="file-text-fill" color="#909399" labelColor="#909399" size="16" label="详情"
								@click="goto(item.id,item.vote_id)"></u-icon>
							<u-icon name="checkmark-circle-fill" color="#19be6b" labelColor="#19be6b" size="16"
								label="通过" @click="check(item.id,index,20)" v-if="item.status != 20"></u-icon>
							<u-icon name="close-circle-fill" color="#ff9900" labelColor="#ff9900" size="16" label="驳回"
								@click="check(item.id,index,30)" v-if="item.status != 30"></u-icon>
							<u-icon name="minus-circle-fill" color="#fa3534" labelColor="#fa3534" size="16" label="删除"
								@click="del(item.id,index)"></u-icon>
						</view>
					</view>
				</u-cell>
			</u-list-item>
		</u-list>

	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				vote_id: '',
				status: 10,
				status10: 0,
				status20: 0,
				status30: 0,
				list: [],
				has_more: true,
				page: 1,
			};
		},
		onLoad: function(options) {
			this.utils.hideShare()
			this.vote_id = options.vote_id;
			this.status = options.status || 10;
			this.ajax();
		},
		methods: {
			tab(status) {
				this.status = status
				this.has_more = true
				this.page = 1
				this.list = null
				this.ajax();
			},
			scrolltolower() {
				if (this.has_more) {
					this.ajax();
				}
			},
			ajax() {
				this.http('person/index', {
					vote_id: this.vote_id,
					status: this.status,
					page: this.page
				}, 'get').then(res => {
					let person = res.data.data;
					this.list = this.list || [];
					this.list = this.list.concat(person);
					this.page++;
					this.has_more = res.data.has_more;
					this.count();
				});
			},
			count() {
				this.http('person/count', {
					vote_id: this.vote_id,
				}, 'get').then(res => {
					this.status10 = res.data.status10;
					this.status20 = res.data.status20;
					this.status30 = res.data.status30;
				});
			},
			goto(id,vote_id) {
				this.utils.goto('/pages/apply/apply?person_id=' + id+'&vote_id='+vote_id+'&manage=1')
			},
			check(id, index, status) {
				this.http('person/status', {
					id: id,
					status: status
				}, 'get').then(res => {
					this.count();
					this.list.splice(index, 1);
				});
			},
			del(id, index) {
				uni.showModal({
					title: '删除选项',
					content: '是否确实删除？',
					showCancel: true, //是否显示取消按钮
					success: res => {
						if (res.confirm) {
							this.http('person/del', {
								id: id
							}, 'get').then(res => {
								this.count();
								this.list.splice(index, 1);
							});
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.tabs {
		@include flex;
		background: #fff;
		text-align: center;
		border-bottom: 1px solid #eee;

		view {
			flex: 1;
			height: 40px;
			line-height: 40px;
		}
	}

	.u-list {
		background-color: #fff;

		.u-cell__body {
			height: 80px;
		}
	}

	.btns {
		@include flex;
		margin-top: 10px;

		.u-icon {
			flex: 1;
		}
	}
</style>
